<template>
	<view class="container">

			<!-- 顶部轮播图 -->
			<view class="swiper-container">
				<swiper :autoplay="true" :interval="3000" :circular="true">
					<swiper-item v-for="(item, index) in swiperList" :key="index">
						<image :src="item.image" @click="clicklunbotuItem(index,item)" class="swiper-image" />
					</swiper-item>
				</swiper>
			</view>


			<!-- 中间四个选项 -->
			<!-- <view class="menu-container">
				<view v-for="(item, index) in recommendLists" :key="index" class="menu-item"
					:class="{ active: currentRecommendIndex === index }" @click="changeRecommend(index,item.category)" v-show="item.isShow">
					<view class="menu-name">{{ item.name }}</view>
					<view class="menu-discount" :class="{ active: currentRecommendIndex === index }">{{ item.discount }}</view>
				</view>
			</view> -->

			<!-- 选择后的内容区域 -->
			<!-- <view class="content-container" >
					<view class="brand-list">
						<view class="brand-item" v-for="(brand, index) in currentCategoryList" :key="index">
							<image :src="brand.pic" class="brand-image" @click="clickCategoryItem(index,brand)" />
							<view class="brand-name">{{ brand.cate_name }}</view>
						</view>
					</view>
			</view> -->
			
			<view class="czyh-container"  v-for="(recommend,recommendIndex) in recommendLists" :key="recommendIndex" v-if="recommend.category.length>0">
				<view style="margin-bottom: 5px;">
					<text class="czyh-title1">|</text>
					<text class="czyh-title2">{{recommend.cate_name}}</text>
				</view>
				<view class="content-container" >
					<view class="brand-list">
						<view class="brand-item" v-for="(brand, index) in recommend.category" :key="index">
							<image :src="brand.pic" class="brand-image" @click="clickCategoryItem(index,brand)" />
							<view class="brand-name">{{ brand.cate_name }}</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 滚动条无法滚动到最后的空白 -->
			<view class="uni-p-b-98"></view>
		<tabBar  v-if="!is_diy" :pagePath="'/pages/goods_cate/goods_cate'"></tabBar>
		<pageFooter  v-else></pageFooter>
	</view>

</template>

<script>
	import pageFooter from '@/components/pageFooter/index.vue'
	import tabBar from "@/pages/index/visualization/components/tabBar.vue";
	import {
		getCategoryList,
		xiangshenghuoListApi
	} from '@/api/store.js';
	export default {
		components: {
			pageFooter,
			tabBar
		},
		data() {
			return {
				is_diy: uni.getStorageSync('is_diy'),
				currentMenu: 0, // 当前选中的菜单项
				swiperList: [{
						image: 'https://xima-shop.oss-cn-hangzhou.aliyuncs.com/attach/2025/05/20250527/lunbotu1.png'
					},
					{
						image: 'https://xima-shop.oss-cn-hangzhou.aliyuncs.com/attach/2025/05/20250527/lunbotu1.png'
					},
					// {
					// 	image: 'https://www.xiaokunkeji.cn/user/static/img/banner.bcee69a.png'
					// }
				],
				currentCategoryList: [],
				currentRecommendIndex: 0,
				recommendLists: [],
				
			}
		},
		onLoad() {
			
			//查询所有分类
			// getCategoryList().then(res => {
			// 	 console.log("chaxunfenlei:",res.data);
			// 	 this.letCategory(res.data[14].children)
			// })
			
			xiangshenghuoListApi().then(res =>{
				console.log("chaxunfenlei:",res);
				this.letCategory(res.data)
			})
			
			//=======
			// this.$set(this, 'currentCategoryList', this.recommendLists[0].category);
		},
		methods: {
			letCategory(category){
					// // console.log("letttttt:",category);
					
					// category.forEach((item,index) =>{
					// 	// console.log("=======",item)
					// 	let isPush=false;
					// 	this.recommendLists.forEach((recommendItem,recommendIndex) =>{
					// 		if(recommendItem.targetIdList.indexOf(item.id)!=-1){
					// 			isPush=true;
					// 			recommendItem.category.push(item);
					// 		}
					// 	})
					// 	//如果没有分类的就添加到其他
					// 	if(!isPush){
					// 		this.recommendLists[this.recommendLists.length-1].category.push(item);
					// 	}
					// })
					this.recommendLists=category
					console.log("this.recommendLists:",this.recommendLists)
				this.currentCategoryList = this.recommendLists[0].category;
					
			},
			changeRecommend(index, category) {
				// this.$set(this, 'currentRecommendIndex', index);
				// this.$set(this, 'currentCategoryList', category);
				this.currentRecommendIndex = index;
				this.currentCategoryList = category;
			},
			
			clicklunbotuItem(index, item){
				// uni.navigateTo({
				// 	// url: "/pages/goods/goods_list/index?cid=290&title=瑞幸咖啡"
				// 	url: "/pages/goods/lottery/grids/index?type=1"
				// // url: "https://s.c1ns.cn/pyBkb"
				// })
				//     wx.requestSubscribeMessage({
				//       tmplIds: ['BmbzOQzIEfAJocRGpc4N2ByA_OglruqDqzDpSw6NOSI'], // 这里填入从微信公众平台获取的物流模板ID
				//       success: (res) => {
				//         if (res['BmbzOQzIEfAJocRGpc4N2ByA_OglruqDqzDpSw6NOSI'] === 'accept') {
				//           console.log('已订阅:',res);
				//         }
				//       },
				//       fail: (err) => {
				//         console.error('检查订阅能力失败:', err);
				//       }
				//     });
				// uni.navigateToMiniProgram({
				//     appId: 'wx9ad912bf20548d92',
				//     success(res) {
				//       console.log('跳转成功', res);
				//     },
				//     fail(err) {
				//       console.error('跳转失败', err);
				//       uni.showToast({
				//         title: '跳转失败，请稍后再试',
				//         icon: 'none'
				//       });
				//     }
				//   });
				
				
				
				// //=======
				// wx.showModal({
				//     title: '订阅快递动态',
				//     content: '尊敬的客户，您可通过订阅授权"微信物流助手"服务号，来获取后续的物流动态11',
				//     confirmText: '立即订阅',
				//     cancelText: '已订阅',
				//     success(res) {
				//       if (res.confirm) {
				//         // 立即关注
				//        uni.navigateToMiniProgram({
				//            appId: 'wx9ad912bf20548d92',
				//            success(res) {
				//              console.log('订阅成功', res);
				//            },
				//            fail(err) {
				//              console.error('订阅失败', err);
				//              uni.showToast({
				//                title: '订阅失败，请稍后再试',
				//                icon: 'none'
				//              });
				//            }
				//          });
				//       } else {
				//     //     // 显示二级菜单
				//     //     wx.showActionSheet({
				//     //       itemList: ['已关注，不再弹出', '不关注，不再弹出'],
				//     //       success(res) {
				//     //         if (res.tapIndex === 0) {
				//     //         } else if (res.tapIndex === 1) {
				//     //         }
				//     //       },
				// 		  // fail(){
				// 			 //  console.log("-----取消")
				// 		  // }
				//     //     });
				//       }
				//     },
				// 	fail() {
				// 		console.log("-----取消关注")
				// 	}
				//   });
				
				// //===========
				  
				  
				  
				  
				  
				  
				console.log("点击的图片的顺序", index, "；点击对象：",item )
			},
			clickCategoryItem(index, item) {
				console.log("点击的图片的顺序", index, "；点击对象：",item )
					uni.navigateTo({
						url: "/pages/goods/goods_list/index?cid="+item.category_id+"&title="+item.cate_name
					// url: "https://s.c1ns.cn/pyBkb"
					})
			},
			
			getinit() {
				setTimeout(() => {
					console.log('1秒后执行的操作');
				}, 1000); // 1000毫秒 = 1秒
			},
			changeMenu(index) {
				this.currentMenu = index;
			},
			
		}
	}
</script>

<style scoped>
	.container {
		padding: 10px;
		background-color: #f8f8f8;
	}

	/* 轮播图样式 */
	.swiper-container {
		height: 150px;
		border-radius: 8px;
		overflow: hidden;
		margin-bottom: 15px;
	}


	.swiper-image {
		width: 100%;
		height: 100%;
	}

	/* 菜单样式 */
	.menu-container {
		display: flex;
		justify-content: space-around;
		margin-bottom: 15px;
		background-color: #fff;
		padding: 10px 0;
		border-radius: 8px;
	}
	
	/* 内容区域样式 */
	.content-container {
		background-color: #f5f8fb;
		border-radius: 8px;
		padding: 10px;
		/* height: 260rpx; */
		margin-bottom: 1px;
		/* overflow-x: auto; */
		/* overflow-y: auto; */
		
	}
	
	.content-container.last {
		background-color: #f5f8fb;
		border-radius: 8px;
		padding: 10px;
		/* height: 600rpx; */
		margin-bottom: 1px;
		/* overflow-x: auto; */
		/* overflow-y: auto; */
		
	}
	
	
	.section-title {
		/* font-size: 16px;
		font-weight: bold; */
		margin-bottom: 10px;
	}
	

	.menu-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 5px 10px;
		border-radius: 15px;
	}

	.menu-item.active {
		background-color: #f1c9a6;
		color: white;
	}

	.menu-name {
		font-size: 30rpx;
		color: #010c22;
		font-weight: 600;
	}

	.menu-discount {
		font-size: 24rpx;
		color: #cbcbcb;
	}
	.menu-discount.active {
		font-size: 24rpx;
		color: #232323;
	}

	

	.sub-title {
		color: #ff4d4f;
		font-size: 12px;
		margin-left: 5px;
	}

	/* 品牌列表样式 */
	.brand-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		
	}

	.brand-item {
		width: 19.5%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 1rpx;
		margin-bottom: 10px;
	}

	.brand-image {
		height: 75rpx;
		width: 75rpx;
		margin-top: 15rpx;
		border-radius: 15%;
	}
	
	.brand-name {
		font-size: 12px;
		/* font-style: italic;斜体 */
		margin-top: 10rpx;
		text-align: center;
		font-weight: 600;
	}
	
	.czyh-container {
		background-color: #ffffff;
		border-radius: 3px;
		padding: 5px;
		/* height: 500rpx; */
		margin-bottom: 20rpx;
		/* overflow-y: hidden; */
	}
	
	.czyh-title1 {
		margin-left: 10rpx;
		font-weight: bold;
		font-size: 40rpx;
		color: #6a8dff;
	}
	
	.czyh-title2 {
		margin-left: 5px;
		font-weight: bold;
		font-style: italic;
		font-size: 33rpx;
		color: #101628;
		letter-spacing: 1rpx;
	}
	
	
	
	.czyh-left {
		width: 48%;
		/* height:  9rem; */
		float: left;
		background-image: url('https://www.xiaokunkeji.cn/user/static/img/pre-left.278f17c.png');
		background-size: cover;
		margin-bottom: 6px;
		
	}

	.czyh-right {
		width: 48%;
		
	}

	
</style>